<!-- @format -->

<template>
  <div class="hello">
    <el-row class="table-grid-content">
      <el-col :span="3" class="grid">
        <el-input v-model="search.name1" placeholder="请输入姓名"></el-input>
      </el-col>
      <el-col :span="4" class="grid">
        <el-select v-model="search.status1" placeholder="请选择">
          <el-option
            v-for="item in stateoptions"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="10" class="grid">
        <div class="block">
          <el-date-picker
            v-model="search.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="2" class="grid" :gutter="1">
        <el-button type="primary" @click="searchs(search)" icon="el-icon-search"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="2" class="grid" :gutter="1">
        <el-button type="primary" @click="clear" icon="el-icon-search"
          >清空</el-button
        >
      </el-col>
      <el-col :span="2" class="grid" :gutter="1">
        <el-button type="primary" @click="addMembers()">增加</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tables"
      :stripe="true"
      :border="true"
      width="100%"
      :rules="rules"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="状态" prop="status"> </el-table-column>
      <el-table-column label="日期" prop="date"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="modifyData(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button type="danger" @click="deleteData(scope.$index, tableData)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="centerDialogVisible">
      <el-form :model="editForm">
        <el-form-item label="姓名">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editForm.status">
            <el-option label="激活" value="激活"></el-option>
            <el-option label="未激活" value="未激活"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" :picker-options="pickerOption">
          <el-date-picker
            v-model="editForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isAddMembers">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addForm.status">
            <el-option label="激活" value="激活"></el-option>
            <el-option label="未激活" value="未激活"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" :picker-options="pickerOption">
          <el-date-picker
            v-model="addForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitAddRow()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var _index;
export default {
  data() {
    return {
      centerDialogVisible: false,
      isAddMembers: false,
      editForm: [],
      addForm: [],
      input: '',
      searchData: '',
      search: {
        name1: '',
        status1: '',
        value11: '',
        time: new Date().getTime()
      },
      addForm: {
        name: '',
        sex: '',
        age: '',
        status: '',
        email: '',
        time: new Date().getTime()
      },
      pickerOption: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tableData: [
        {
          date: '202-2-21',
          name: '小明',
          age: 12,
          sex: '男',
          status: '激活',
          email: '1236@123.com',
          time: 1111
        },
        {
          date: '2020-02-25',
          name: '小红',
          age: 22,
          sex: '女',
          status: '未激活',
          email: '1236@223.com',
          time: 2222
        },
        {
          date: '2020-02-24',
          name: '小花',
          age: 18,
          sex: '女',
          status: '激活',
          email: '1236@223.com',
          time: 3333
        },
        {
          date: '2020-02-22',
          name: '小强',
          age: 25,
          sex: '男',
          status: '未激活',
          email: '1236@223.com',
          time: 4444
        }
      ],
      //判断必填项
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      //时间选项
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2021, 10, 10, 10, 10), new Date(2021, 10, 11, 10, 10)],
      value2: '',
      stateoptions: [
        { label: '激活', value: '激活', id: 1 },
        {
          label: '未激活',
          value: '未激活',
          id: 2
        }
      ],
      //储存搜索结果
      searchResult: [],
      tableDataSaved: [] //储存tableDate原有的数据
    };
  },
  methods: {
    //删除
    deleteData(index, row) {
      this.tableData.splice(index, 1);
    },
    modifyData(index, row) {
      this.centerDialogVisible = true;
      this.editForm = Object.assign({}, row); //重置对象
      _index = index;

      console.log('row的值是：', this.editForm); //代表选择的这一行的数据
    },
    sumbitEditRow() {
      var editData = _index;
      console.log('editData的值' + this.editForm);
      this.tableData[editData].name = this.editForm.name;
      this.tableData[editData].date = this.editForm.date;
      this.tableData[editData].age = this.editForm.age;
      this.tableData[editData].sex = this.editForm.sex;
      this.tableData[editData].status = this.editForm.status;
      this.tableData[editData].email = this.editForm.email;
      this.centerDialogVisible = false;
    },
    //关闭弹窗
    closeDialog() {
      this.centerDialogVisible = false;
      this.isAddMembers = false;
    },
    //添加信息
    addMembers() {
      this.isAddMembers = true;
      this.addForm = {};
    },
    sumbitAddRow() {
      this.tableData = this.tableData || [];
      // console.log('表格是:' + this.tableData);
      this.tableData.push({
        name: this.addForm.name,
        date: this.addForm.date,
        age: this.addForm.age,
        sex: this.addForm.sex,
        status: this.addForm.status,
        email: this.addForm.email
      });
      console.log('新增的日期：' + this.addForm.date);
      this.addForm = {};
      this.isAddMembers = false;
    },
    //搜索
    searchs(key) {
      console.log(key);
      if (key) {
        let arrResulet = [];
        if (key.time.length > 0) {
          let startTime = key.time[0].getTime();
          let endTime = key.time[1].getTime();
          console.log(startTime);
          //时间戳
          let res = this.tableData.filter(item => {
            console.log(item);
            return item.name == key.name1 && item.status == key.status1;
          });
          //过滤出满足条件的然后再进行时间戳的比较
          res.forEach(item => {
            if (startTime <= item.time && item.time <= endTime) {
              arrResulet.push(item);
            }
          });
          //存放至搜索结果
          this.searchResult = arrResulet;
          this.tableDataSaved = this.tableData;
          this.tableData = this.searchResult;
          console.log(this.tableDataSaved);
          console.log(this.tableData);
        }
      }
    },
    //清空搜索框内容
    clear() {
      this.search = {};
      if (this.tableDataSaved == '') {
        return this.tableData;
      } else {
        console.log(this.tableDataSaved);
        this.tableData = this.tableDataSaved;
      }
    }
  },
  //监听table字段
  computed: {
    tables() {
      let input = this.input;
      if (input) {
        console.log('input输入的搜索内容：' + this.input);
        return this.tableData.filter(data => {
          console.log('object:' + Object.keys(data));
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(input) > -1
            );
          });
        });
      }
      return this.tableData;
    }
  }
};
</script>
<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 50 px;
  background: #ebeef5;
  padding: 10px;
}
</style>
